<template>
	<div>
		<!-- 登录部分 -->
		<div class="login">
			<p>鲜花网管理系统</p>

			<el-form :model="loginForm" ref="loginForm" :rules="loginRules" class="login_form" :show-message="true">
				<!-- 用户名 -->
				<el-form-item class="loginTemplate" prop="userName">
					<el-input class="f-18" v-model="loginForm.userName" prefix-icon="el-icon-user" placeholder="请输入用户名" />
				</el-form-item>
				<!-- 密码 -->
				<el-form-item class="loginTemplate" prop="passWord">
					<!-- 数据绑定没有:model -->
					<el-input class="f-18" v-model="loginForm.passWord" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"  @keyup.enter.native="login" /><!-- enter触发登录事件-->
				</el-form-item>
				<!-- 按钮区域 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" class="reset" @click="resetLoginForm">重置</el-button>
				</el-form-item>
			</el-form>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				// 表单元素登录
				loginForm: {
					userName: '',
					passWord: ''
				},
				//验证规则
				loginRules: {
					userName: [{
							required: true,
							message: '请输入登陆账号',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					passWord: [{
							required: true,
							message: '请输入登陆密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 10,
							message: '长度在 6 到 10 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			//重置登录表单
			resetLoginForm() {
				this.$refs.loginForm.resetFields();
				// this.loginForm = {}
			},
			//登录
			async login() {
				this.$refs.loginForm.validate(async valid => {
					if (!valid) return this.$message.error('请填写必填项');
					let res = await this.$http.post('/api/users/login', this.loginForm);
					if (res.data.status !== 200) return this.$message.error(res.data.text);
					this.$message.success('登陆成功');
					window.sessionStorage.setItem("token", res.data.token);
					this.resetLoginForm();
					this.$router.replace('/home')
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.login {
		/* 盒子居中 */
		width: 420px;
		height: 320px;
		background-color: #b8e2f2;
		position: absolute;
		transform: translate(-50%, -50%);
		border-radius: 18px;
		opacity: .8;
		top: 50%;
		left: 50%;
		background: url(../assets/tushuguan.jpg) no-repeat;
		background-size: cover;

		p {
			text-align: center;
			text-indent: 15px;
			font-size: 30px;
			margin-top: 24px;
			color: brown;
			font-weight: 800;
			letter-spacing: 16px
		}

		img {
			position: absolute;
			top: 0;
			right: 0;
		}

		.login_form {
			width: 360px;
			height: 280px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;

			.loginTemplate {
				width: 300px;
				margin: 60px auto 0 auto;
			}

			.loginTemplate:nth-child(2) {
				margin: 40px auto 0 auto;
			}
		}

		.btns {
			margin-top: 40px;
			display: flex;
			justify-content: space-around;

			.reset {
				margin-left: 200px;
			}
		}

		.forgetPassword {
			position: absolute;
			right: 8%;
			bottom: 23%;
			color: blue;
			cursor: pointer;
			font-size: 14px;
		}
	}
</style>
